<template>
    <div class="container">
        <div class="title">
            <div class="icon">
                <img src="/favicon.ico" alt="" width="150px" height="150px">
            </div>
            <div class="title-text">Hikari 2</div>
        </div>
        <div class="pwd-div">
            <a-input class="pwd-input" ref="userNameInput" type="password" v-model="pwd" placeholder="请输入后台登录口令" size="large" :disabled="loading">
                <a-icon slot="prefix" type="lock" />
            </a-input>
            <div class="pwd-fgt">
                <a href="">忘记密码</a>
            </div>
            <div class="login-div">
                <a-button type="primary" block :loading="loading" @click="onLoginClick">登 录</a-button>
            </div>
        </div>
        <div class="footer">
            <div class="footer-links">
                <div class="footer-link">官网</div>
                <div class="footer-link">文档</div>
                <div class="footer-link">帮助</div>
            </div>
            <div class="footer-copyright">
                xtzero.me 负责设计与开发
            </div>
        </div>
    </div>
</template>
<script>
import { login } from '../../api/login'
export default {
    name: 'Login',
    data() {return {
        pwd: '',
        loading: false
    }},
    methods: {
        onLoginClick() {
            if (!this.pwd) {
                this.$message.error('请输入后台登录口令')
                return
            }
            this.loading = true
            login({
                pwd: this.pwd
            }).then(res => {
                setTimeout(() => {
                    this.loading = false
                    localStorage.setItem('access_token', res.data.token)
                    this.$router.push('/')
                }, 500);
            }).catch(e => {
                this.$message.error(e.msg)
                setTimeout(() => {
                    this.loading = false
                }, 500);
            })
        }
    }
}
</script>
<style lang="scss" scoped>
body {
    width: 100vw;
    height: 100vh;
    overflow: hidden !important;

    .container {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-image: url('/favicon.ico');
        background-size: cover;
        background-position: -50vw -50vw;
        background-repeat: no-repeat;



        .title {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-top: 15vh;
            .title-text {
                font-size: 2.3em;
                font-weight: 500;
                letter-spacing: 2px;
            }
        }

        .pwd-div {
            width: 20%;

            .pwd-fgt {
                width: 100%;
                display: flex;
                flex-direction: row;
                justify-content: flex-end;
                margin-top: 30px;
            }

            .login-div {
                width: 100%;
                margin-top: 30px;
            }
        }
        .footer {
            position: absolute;
            bottom: 30px;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 20%;
            color: #8c8c8c;

            .footer-links {
                display: flex;
                flex-direction: row;
                justify-content: space-around;

                .footer-link {
                    margin: 0 15px;
                }
                .footer-link:hover {
                    cursor: pointer;
                    color: #0090FB;
                }
            }
            .footer-copyright {
                margin-top: 10px;
            }
        }
    }
}
</style>

